<template>
    <div class="hotmusic">
        <div class="hotop">
            <div class="hotopct">
                <div class="hoticon"></div>
                <div class="hottime">
                    更新日期：{{updateTime|upDate}}
                </div>
            </div>
        </div>
        <ul>
            <Listitem v-for="(item,k) in hotMusicList" :item="item" :num="k+1" :key="item.id">
                <div class="num">{{(k + 1)|fixNum}}</div>
            </Listitem>
        </ul>
        <Loading v-if="hotMusicList.length <= 0" />
        <div class="hotdn">
            <a @click="add">查看完整榜单</a>
            <!-- <router-link :to="`/hot/${num+1}`">查看完整榜单</router-link> -->
        </div>
    </div>
</template>

<script>
import Listitem from '../components/Listitem.vue';
import Loading from '../components/Loading'
export default {
    name: 'HotMusic',
    components: {
        Listitem,
        Loading
    },
    data() {
        return {
            hotMusicList: [],
            updateTime: '',
            num: 0
        }
    },
    methods: {
        add() {
            this.loadMusic(this);
        },
        loadMusic(vm) {
			let hotMusicId = [];
			vm.num++;
            vm.axios.get('/top/list?idx=1').then((response) => {
                vm.updateTime = response.data.playlist.updateTime;
                hotMusicId = response.data.playlist.trackIds;
                hotMusicId = hotMusicId.slice(20 * (vm.num - 1), 20 * vm.num);
                // console.log(hotMusicId);
            }).then(() => {
                for (let v of hotMusicId) {
                    vm.axios.get('/song/detail?ids=' + v.id
                    ).then((response)=>{
                        // console.log(response);
                        vm.hotMusicList.push({
                            name: response.data.songs[0].name,
                            id: response.data.songs[0].id,
                            song: {
                                privilege: {
                                    maxbr: response.data.privileges[0].maxbr
                                },
                                artists: [
                                    {name: response.data.songs[0].ar[0].name}
                                ]
                            }
                        });                        
                    })
                }
            })
		}
    },
    beforeRouteEnter(to, from, next) {
		next((vm) => {
            // vm.hotMusicList = [];
            vm.$root.playingMusic.idList = [];
            vm.loadMusic(vm);
        })
	},
	beforeRouteUpdate(to, from, next) {
		this.loadMusic(this);
		next();
	},
	filters: {
		upDate(value) {
			let date = new Date(value);
			let d = date.getDate();
			let m = date.getMonth() + 1;
			d = d < 10 ? '0' + d : d;
			m = m < 10 ? '0' + m : m;
			return m + '月' + d + '日';
        },
        fixNum(n) {
            return n < 10 ? '0' + n : n;
        }
	}
}
</script>

<style lang="less" scoped>
.hotmusic {
    padding-bottom: 50px;
}
.hotop {
    position: relative;
    padding-top: 38.9%;
    overflow: hidden;
    background: url(../assets/hot_music_bg_3x.jpg) no-repeat;
    background-size: contain;
    .hotopct {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 2;
        padding-left: 20px;
        box-sizing: border-box;
        .hoticon {
            width: 142px;
            height: 67px;
            background: url(../assets/index_icon_2x.png) no-repeat;
            background-size: 166px 97px;
            background-position: -24px -30px;
        }
        .hottime {
            color: hsla(0,0%,100%,.8);
            font-size: 12px;
            margin-top: 10px;
            transform: scale(.91);
            text-align: left;
            transform-origin: left top;
        }
    }
    &.hotop::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 1;
        background-color: rgba(0,0,0,.2);
    }
}
.hotdn {
    width: 100%;
    height: 55px;
    line-height: 55px;
    a {
        display: inline-block;
        padding-right: 14px;
        background: url(../assets/jiantou.svg) 100% no-repeat;
        background-size: 7px 12px;
		font-size: 14px;
		text-decoration: none;
		color: #999;
    }
}
.num {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    font-size: 17px;
    color: #999;
    margin-left: -10px;
}

</style>